<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue商城</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
        }
        
        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            padding: 15px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            padding: 8px 15px;
            border-radius: 20px;
            transition: background-color 0.3s;
        }
        
        .nav-links a.active {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        /* 首页英雄区域 */
        .hero {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            padding: 80px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
        }
        
        .hero-content {
            max-width: 50%;
        }
        
        .hero-content h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero-content p {
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .btn {
            background-color: white;
            color: #6a11cb;
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .feature-card {
            background-color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            width: 250px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        }
        
        .feature-card h3 {
            color: #6a11cb;
            margin: 15px 0;
        }
        
        .feature-icon {
            font-size: 40px;
            margin-bottom: 15px;
        }
        
        /* 产品展示区 */
        .section-title {
            text-align: center;
            margin: 60px 0 40px;
            font-size: 32px;
            color: #333;
        }
        
        .products {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            padding: 0 5%;
        }
        
        .product-card {
            background-color: white;
            border-radius: 15px;
            overflow: hidden;
            width: 280px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
        }
        
        .product-image {
            height: 200px;
            background-color: #f5f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #6a11cb;
            font-size: 50px;
        }
        
        .product-info {
            padding: 20px;
        }
        
        .product-info h3 {
            margin-bottom: 10px;
            font-size: 18px;
        }
        
        .product-price {
            color: #6a11cb;
            font-size: 22px;
            font-weight: bold;
            margin: 10px 0;
        }
        
        .btn-detail {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border: none;
            padding: 8px 0;
            border-radius: 30px;
            width: 100%;
            cursor: pointer;
            font-size: 14px;
            margin-top: 15px;
        }
        
        /* 优势区域 */
        .features {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            padding: 40px 5%;
        }
        
        .feature-item {
            background-color: white;
            border-radius: 15px;
            padding: 30px;
            width: 250px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        }
        
        /* 产品列表页 */
        .banner {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            padding: 60px 5%;
            color: white;
            text-align: center;
        }
        
        .banner h1 {
            font-size: 36px;
            margin-bottom: 15px;
        }
        
        .search-bar {
            background-color: white;
            margin: 40px 5%;
            padding: 20px;
            border-radius: 15px;
            display: flex;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        }
        
        .search-input {
            flex: 1;
            padding: 12px 20px;
            border: 1px solid #ddd;
            border-radius: 30px 0 0 30px;
            font-size: 16px;
        }
        
        .search-btn {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border: none;
            padding: 0 25px;
            border-radius: 0 30px 30px 0;
            cursor: pointer;
        }
        
        .categories {
            display: flex;
            gap: 15px;
            margin: 20px 5%;
            flex-wrap: wrap;
        }
        
        .category {
            padding: 8px 20px;
            border: 1px solid #ddd;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .category.active {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-color: #6a11cb;
        }
        
        .results-count {
            margin: 30px 5% 20px;
            color: #666;
        }
        
        /* 产品详情页 */
        .product-detail {
            display: flex;
            padding: 40px 5%;
            gap: 40px;
        }
        
        .product-gallery {
            flex: 1;
            background-color: #f5f7fa;
            border-radius: 15px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #6a11cb;
            font-size: 100px;
        }
        
        .product-detail-info {
            flex: 1;
        }
        
        .product-category {
            color: #6a11cb;
            font-size: 16px;
            margin-bottom: 10px;
        }
        
        .product-title {
            font-size: 32px;
            margin-bottom: 15px;
        }
        
        .product-rating {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .price-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 25px 0;
        }
        
        .current-price {
            font-size: 32px;
            color: #6a11cb;
            font-weight: bold;
        }
        
        .original-price {
            text-decoration: line-through;
            color: #999;
        }
        
        .discount {
            background-color: #ff4757;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 14px;
        }
        
        .features-list {
            margin: 25px 0;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        /* 页脚 */
        .view-all {
            text-align: center;
            margin: 40px 0;
        }
        
        /* 响应式设计 */
        @media (max-width: 900px) {
            .hero {
                flex-direction: column;
                text-align: center;
                gap: 40px;
            }
            
            .hero-content {
                max-width: 100%;
            }
            
            .product-detail {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="logo">Vue商城</div>
            <div class="nav-links">
                <a :class="{active: currentPage === 'home'}" @click="navigateTo('home')">首页</a>
                <a :class="{active: currentPage === 'products'}" @click="navigateTo('products')">产品列表</a>
                <a :class="{active: currentPage === 'about'}" @click="navigateTo('about')">平台介绍</a>
            </div>
        </nav>

        <!-- 首页内容 -->
        <div v-if="currentPage === 'home'">
            <!-- 英雄区域 -->
            <section class="hero">
                <div class="hero-content">
                    <h1>欢迎来到Vue商城</h1>
                    <p>发现最优质的产品，享受最佳的购物体验</p>
                    <button class="btn" @click="navigateTo('products')">立即购物</button>
                </div>
                <div class="feature-card">
                    <h3>精选产品</h3>
                    <p>品质保证</p>
                </div>
            </section>

            <!-- 优势区域 -->
            <h2 class="section-title">为什么选择我们</h2>
            <div class="features">
                <div class="feature-item">
                    <div class="feature-icon" style="color: #ff6b81;">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <h3>精选商品</h3>
                    <p>我们精心挑选每一件商品，确保品质优良</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon" style="color: #ff9f43;">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h3>快速配送</h3>
                    <p>24小时内发货，全国范围内快速送达</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon" style="color: #ff4757;">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h3>品质保证</h3>
                    <p>100%正品保证，不满意可退换</p>
                </div>
                <div class="feature-item">
                    <div class="feature-icon" style="color: #a4b0be;">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3>贴心服务</h3>
                    <p>24/7客户服务，随时为您解答疑问</p>
                </div>
            </div>

            <!-- 热门产品 -->
            <h2 class="section-title">热门产品</h2>
            <div class="products">
                <div class="product-card" v-for="product in featuredProducts" :key="product.id">
                    <div class="product-image">
                        <i :class="product.icon"></i>
                    </div>
                    <div class="product-info">
                        <h3>{{ product.name }}</h3>
                        <div class="product-price">{{ product.price }}</div>
                        <button class="btn-detail" @click="viewProduct(product)">查看详情</button>
                    </div>
                </div>
            </div>

            <div class="view-all">
                <button class="btn" @click="navigateTo('products')">查看全部产品</button>
            </div>
        </div>

        <!-- 产品列表页 -->
        <div v-if="currentPage === 'products'">
            <section class="banner">
                <h1>产品列表</h1>
                <p>探索我们精心挑选的优质产品</p>
            </section>

            <div class="search-bar">
                <input type="text" class="search-input" placeholder="搜索产品...">
                <button class="search-btn">
                    <i class="fas fa-search"></i>
                </button>
            </div>

            <div class="categories">
                <div 
                    v-for="(category, index) in categories" 
                    :key="index" 
                    :class="['category', {active: selectedCategory === category}]"
                    @click="selectCategory(category)"
                >
                    {{ category }}
                </div>
            </div>

            <div class="results-count">找到{{ filteredProducts.length }}个产品</div>

            <div class="products">
                <div class="product-card" v-for="product in filteredProducts" :key="product.id">
                    <div class="product-image">
                        <i :class="product.icon"></i>
                    </div>
                    <div class="product-info">
                        <div class="product-category">{{ product.category }}</div>
                        <h3>{{ product.name }}</h3>
                        <p>{{ product.description }}</p>
                        <div class="product-price">{{ product.price }}</div>
                        <div class="product-rating">
                            <span v-for="i in 5" :key="i">
                                <i class="fas fa-star" :style="{color: i <= Math.round(product.rating) ? '#ffc107' : '#ddd'}"></i>
                            </span>
                            <span>({{ product.rating }})</span>
                        </div>
                        <button class="btn-detail" @click="viewProduct(product)">查看详情</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品详情页 -->
        <div v-if="currentPage === 'detail'">
            <div style="padding: 20px 5%;">
                <a @click="currentPage = 'products'" style="color: #6a11cb; text-decoration: none; cursor: pointer;">
                    <i class="fas fa-arrow-left"></i> 返回产品列表
                </a>
            </div>

            <div class="product-detail">
                <div class="product-gallery">
                    <i :class="currentProduct.icon"></i>
                </div>
                <div class="product-detail-info">
                    <div class="product-category">{{ currentProduct.category }}</div>
                    <h1 class="product-title">{{ currentProduct.name }}</h1>
                    <div class="product-rating">
                        <span v-for="i in 5" :key="i">
                            <i class="fas fa-star" :style="{color: i <= Math.round(currentProduct.rating) ? '#ffc107' : '#ddd'}"></i>
                        </span>
                        <span>{{ currentProduct.rating }} ({{ currentProduct.reviews }})条评价</span>
                    </div>

                    <div class="price-container">
                        <div class="current-price">{{ currentProduct.price }}</div>
                        <div class="original-price">{{ currentProduct.originalPrice }}</div>
                        <div class="discount">优惠¥{{ currentProduct.discount }}</div>
                    </div>

                    <div class="features-list">
                        <div class="feature-item" v-for="(feature, index) in currentProduct.features" :key="index">
                            <i class="fas fa-check" style="color: #2ed573;"></i>
                            <span>{{ feature }}</span>
                        </div>
                    </div>

                    <button class="btn" style="margin-top: 20px;">加入购物车</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref } = Vue;
        
        createApp({
            setup() {
                const currentPage = ref('home');
                const selectedCategory = ref('全部');
                const currentProduct = ref({});
                
                const categories = ref(['全部', '电子产品', '服装', '家居', '运动', '书籍']);
                
                const products = ref([
                    {
                        id: 1,
                        name: '智能手机',
                        category: '电子产品',
                        price: '¥2999',
                        originalPrice: '¥3299',
                        discount: 300,
                        rating: 4.8,
                        reviews: 256,
                        icon: 'fas fa-mobile-alt',
                        description: '最新款智能手机，高性能处理器，超清显示',
                        features: ['5G网络支持', '无线充电', 'IP68防水']
                    },
                    {
                        id: 2,
                        name: '智能手表',
                        category: '电子产品',
                        price: '¥1299',
                        originalPrice: '¥1499',
                        discount: 200,
                        rating: 4.5,
                        reviews: 128,
                        icon: 'fas fa-clock',
                        description: '健康监测，运动追踪，智能提醒',
                        features: ['心率监测', '运动模式', '防水设计']
                    },
                    {
                        id: 3,
                        name: '笔记本电脑',
                        category: '电子产品',
                        price: '¥6999',
                        originalPrice: '¥7999',
                        discount: 1000,
                        rating: 4.7,
                        reviews: 89,
                        icon: 'fas fa-laptop',
                        description: '轻薄便携，强劲性能，长效续航',
                        features: ['高性能处理器', '超薄设计', '长续航']
                    },
                    {
                        id: 4,
                        name: '无线耳机',
                        category: '电子产品',
                        price: '¥899',
                        originalPrice: '¥999',
                        discount: 100,
                        rating: 4.6,
                        reviews: 201,
                        icon: 'fas fa-headphones',
                        description: '主动降噪，高清音质，持久续航',
                        features: ['主动降噪', '高清音质', '长续航']
                    },
                    {
                        id: 5,
                        name: '时尚T恤',
                        category: '服装',
                        price: '¥99',
                        rating: 4.3,
                        reviews: 56,
                        icon: 'fas fa-tshirt',
                        description: '100%纯棉材质，舒适透气，多种颜色可选',
                        features: ['纯棉材质', '舒适透气', '多色可选']
                    },
                    {
                        id: 6,
                        name: '台灯',
                        category: '家居',
                        price: '¥199',
                        rating: 4.6,
                        reviews: 78,
                        icon: 'fas fa-lightbulb',
                        description: '护眼LED台灯，可调节亮度，学习工作必备',
                        features: ['护眼LED', '亮度可调', '节能设计']
                    },
                    {
                        id: 7,
                        name: '咖啡杯',
                        category: '家居',
                        price: '¥45',
                        rating: 4.2,
                        reviews: 42,
                        icon: 'fas fa-coffee',
                        description: '精美陶瓷咖啡杯，享受美好的咖啡时光',
                        features: ['精美陶瓷', '易清洗', '多种款式']
                    }
                ]);
                
                const featuredProducts = ref([
                    products.value[0],
                    products.value[1],
                    products.value[2],
                    products.value[3]
                ]);
                
                const filteredProducts = ref(products.value);
                
                const navigateTo = (page) => {
                    currentPage.value = page;
                    window.scrollTo(0, 0);
                };
                
                const selectCategory = (category) => {
                    selectedCategory.value = category;
                    if (category === '全部') {
                        filteredProducts.value = products.value;
                    } else {
                        filteredProducts.value = products.value.filter(p => p.category === category);
                    }
                };
                
                const viewProduct = (product) => {
                    currentProduct.value = product;
                    currentPage.value = 'detail';
                    window.scrollTo(0, 0);
                };
                
                return {
                    currentPage,
                    selectedCategory,
                    currentProduct,
                    categories,
                    products,
                    featuredProducts,
                    filteredProducts,
                    navigateTo,
                    selectCategory,
                    viewProduct
                };
            }
        }).mount('#app');
    </script>
</body>
</html>










